/*
 * @Author: 尹书延
 * @Date: 2021-11-23 19:07:54
 * @LastEditTime: 2021-11-23 11:16:58
 */
(() => {
  const createBtn = (props?: any) => {
    const btn = document.createElement('div');
    btn.className = 'btn';
    if (typeof props === 'object') {
      for (const prop in props) {
        btn[prop] = props[prop];
      }
    }
    return btn;
  };
  const btnCount = 20;
  const layouts = [
    {
      layout: 'solid-width',
      btnName: '定宽按钮',
      unitName: 'px',
      setting: 'solid-width-setting',
    },
    {
      layout: 'percent',
      btnName: '百分比宽',
      unitName: '%',
      setting: 'percent-setting',
    },
    {
      layout: 'grid-auto-fill',
      btnName: '格子布局',
      unitName: 'px',
      setting: 'grid-setting',
    },
    {
      layout: 'grid-auto-fit',
      btnName: '格子布局',
      unitName: 'px',
      setting: 'grid-setting',
    },
  ];
  for (let l = 0; l < layouts.length; l++) {
    const { layout, btnName, unitName, setting } = layouts[l];
    const container = document.getElementById(layout);
    if (!container) continue;
    // 创建按钮
    for (let i = 0; i < btnCount; i++) {
      container.appendChild(createBtn({ textContent: btnName }));
    }
    // 绑定用户操作
    const input = document.getElementById(setting) as HTMLInputElement;
    if (!input) continue;
    const bind2CSSProp = () =>
      container.style.setProperty('--width', Number(input.value) + unitName);
    input.addEventListener('input', bind2CSSProp);
    bind2CSSProp();
  }
})();
